<template>
    <div class="song-list-wrap">
        <div class="song-list-title clear-block" :class="$route.path.includes('/my') ? 'my-song-list-title':''">
            <h3>
                <span class="f-ff2">歌曲列表</span>
            </h3>
            <span class="sub s-fc3">
                <span>{{ songListInfo && songListInfo.songCount }}</span>
                首歌
            </span>
            <div class="more s-fc3">
                播放：
                <strong class="s-fc6">{{songListInfo && songListInfo.playCount}}</strong>
                次
            </div>
        </div>
        <SongList :songList="songListInfo ? songListInfo.songList : []"></SongList>
    </div>
</template>
<script setup>
import SongList from '@/components/SongList.vue';
defineProps({
    songListInfo:Object
})

</script>
<style lang="scss" scoped>
.song-list-wrap {

    .my-song-list-title{
        padding: 0 10px 0 32px;
    }

    .song-list-title {
        height: 33px;
        border-bottom: 2px solid rgb(194, 12, 12);

        h3 {
            font-size: 20px;
            line-height: 28px;
            float: left;
            font-weight: normal;
        }

        .sub {
            margin: 9px 0 0 20px;
            float: left;
        }

        .more {
            float: right;
            margin-top: 5px;
        }


    }

 
}
</style>